<template>
    <div class="template">
      <!-- Tree筛选 -->
        <div id="CategoryTree" style="width: 180px">
            <el-input
                @clear="insertActBtCategory_clear"
                placeholder="输入关键字进行过滤"
                clearable
                v-model="filterText">
            </el-input>
            <el-tree
                class="filter-tree"
                :data="dataCategory"
                :props="defaultCategoryProps"
                default-expand-all
                :filter-node-method="filterCategoryNode"
                ref="tree"
                show-checkbox
                node-key="categoryId"
                :check-strictly="true"
                @check-change="handleCheckChange"
                @node-click="nodeClick">
                <!-- 处理菜单内容过长 -->
                <span class="custom-tree-node" slot-scope="{ node }">
                    <el-tooltip class="item" effect="dark" :content="node.label" placement="top-start">
                        <span > {{ node.label | ellipsis(8) }} </span>
                    </el-tooltip>
                </span>
            </el-tree>
          </div>
          <div id="pageList" style="margin-left: 20px;">
            <div class="addActBtCategory">
                <div style="float: left;display: flex;">
                    <el-input
                            @clear="insertActBtCategory_clear"
                            clearable
                            style="margin-right: 8px;"
                            class="insertActBtCategory"
                            prefix-icon="el-icon-search"
                            placeholder="请输入模型类别名称"
                            v-model="page.categoryName"
                            @keydown.enter.native="initActBtCategoryQuery">
                    </el-input>
                    <el-select style="margin-left: 8px;width:50%" v-model="page.categoryStatus" @clear="insertActBtCategory_clear" clearable placeholder="请选择类别状态">
                        <el-option
                        v-for="item in categoryStatusList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button style="margin-left: 8px;" icon="el-icon-search" type="info" @click="initActBtCategoryQuery">查询</el-button>
                </div>

                <div style="display: flex;justify-content: flex-end">
                    <el-button
                            type="primary"
                            @click="resetCondition"><i class="el-icon-remove"></i><span>重置</span>
                    </el-button>
                    <el-button
                            type="primary"
                            @click="insertActBtCategoryType"><i class="el-icon-add-location"></i><span>新增类别</span>
                    </el-button>
                </div>
            </div>
            <!-- 列表 -->
            <div>
            <el-table
                    :data="ActBtCategoryList"
                    stripe
                    border
                    v-loading="loading"
                    element-loading-text="正在加载..."
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        label="类别编号"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.categoryId }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="类别名称"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.categoryName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                            label="类别状态" width="100">
                        <template slot-scope="scope">
                            <el-tag type="success" v-if="scope.row.categoryStatus==2">启用</el-tag>
                            <el-tag type="danger" v-else>禁用</el-tag>
                        </template>
                    </el-table-column>
                <el-table-column
                        label="类别排序"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.categorySort }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="250">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="updateActBtCategory(scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="deleteActBtCategory(scope.row)"><i class="el-icon-delete"></i>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button @click="deleteBatchActBtCategory" type="danger" style="margin-top: 8px;float: left;" :disabled="this.multipleSelection.length==0"><i class="el-icon-delete"></i>批量删除</el-button>
            </div>
        </div>
        <div>
            <el-dialog
                :title="dialogtitle"
                :visible.sync="dialogVisible"
                width="50%">
                <el-form :model="ActBtCategoryTypeInfo" :rules="rules" ref="ActBtCategoryTypeForm">
                        <el-row>
                            <el-col style="width:50%;float:left;">
                                <el-form-item style="width:70%;float:left;" label="类别名称:" prop="categoryName">
                                    <el-input style="width:70%;float:left;" clearable prefix-icon="el-icon-edit" v-model="ActBtCategoryTypeInfo.categoryName" placeholder="请输入类别名称"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="类别状态:" prop="categoryStatus">
                                    <el-switch
                                            style="display: block;margin-top: 5px;"
                                            v-model="ActBtCategoryTypeInfo.categoryStatus"
                                            active-color="#13ce66"
                                            inactive-color="#ff4949"
                                            active-text="启用"
                                            :active-value=2
                                            inactive-text="禁用"
                                            :inactive-value=1
                                            >
                                    </el-switch>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col style="width:50%;float:left;">
                                <el-form-item label="所属类别:" prop="parentId" style="width:70%;float:left;" >
                                    <tree-select style="width:70%;float:left;"
                                    :options="ProcessModelCategoryTreeSelect"
                                    placeholder="所属类别"
                                    v-model="ActBtCategoryTypeInfo.parentId"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col style="width:50%;float:left;">
                                <el-form-item label="类别排序:" prop="categorySort" style="width:50%;float:left;" >
                                    <el-input-number :min="1" clearable prefix-icon="el-icon-edit" style="width:50%;float:left;"  v-model="ActBtCategoryTypeInfo.categorySort"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addActBtCategoryTypeInfo">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
    name:"workflowActBtCategory",
    components: { TreeSelect },
    data(){
        return{
            filterText: '',
            // 查询目录属性设置
            defaultCategoryProps:{
                children: 'children',
                label: 'categoryName'
            },
            // 初始化目录
            dataCategory:[],
            loading: false,
            page:{
              categoryId:'',
              categoryName:'',
              categoryStatus:0,
              pageNum:1,
              pageSzie:10
            },
            categoryStatusList:[{
                value: 0,
                label: '请选择类别状态'
            },{
                value: 1,
                label: '禁用'
            },
            {
                value: 2,
                label: '启用'
            }],
            ActBtCategoryList:[],
            multipleSelection:[],
            dialogtitle:'',
            dialogVisible:false,
            ActBtCategoryTypeInfo:{
                categoryId:'',
                categoryName:'',
                parentId:'init_level',
                categorySort:1,
                categoryStatus:2
            },
            ProcessModelCategoryTreeSelect:[],
            // 校验规则
            rules: {
                categoryName:[{required:true,message:'请输入类别名称',trigger:'blur'}],
                parentId:[{required:true,message:'请选择所属类别',trigger:'blur'}]
            },
        }
    },
    mounted(){
        // 初始化模型类别列表
        this.initActBtCategoryQuery();
        this.ProcessModelCategoryTreeSelects();
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    methods:{
       // 重置查询条件
        resetCondition(){
            this.$refs.tree.setCheckedNodes([]);
            this.filterText = '';
            this.page.categoryStatus = 0;
            this.page.categoryId = '';
            this.page.categoryName = '';
            this.initActBtCategoryQuery();
        },
        insertActBtCategory_clear(){
          this.resetCondition();
        },
      // 菜单目录选择
        handleCheckChange(data, checked, node){
            if(checked == true){
                this.filterText = data.categoryName;
                this.page.categoryId = data.categoryId;
                this.$refs.tree.setCheckedNodes([data]);
            }
        },
        nodeClick(data,checked,node){
            this.filterText = data.categoryName;
            this.page.categoryId = data.categoryId;
            this.$refs.tree.setCheckedNodes([data]);
        },
        // 目录节点过滤
        filterCategoryNode(value,dataCategory){
            if (!value) return true;
            return dataCategory.categoryName.indexOf(value) !== -1;
        },
        // 获取目录
        ProcessModelCategoryTreeSelects(){
            this.getRequest("/activity/ActBtCategory/query/ProcessModelCategoryTree").then(resp => {
                if (resp) {
                    this.dataCategory = resp.data;
                }
            });
        },
        ProcessModelCategoryTreeQuery(){
          this.getRequest("/activity/ActBtCategory/query/ProcessModelCategoryTree").then(resp => {
              if (resp) {
                let result = [];
                let data = resp.data;
                const children = this.getTree(data);
                let obj = {}
                obj.label = '所属类别'
                obj.id = 'init_level'
                obj.children = children
                result.push(obj)
                this.ProcessModelCategoryTreeSelect = result;
            }
          });
        },
         // 构建树形数据结构
        getTree (tree) {
            let arr = [];
            if (tree) {
            tree.forEach(item => {
                let obj = {};
                obj.label = item.categoryName;
                obj.id = item.categoryId;
                if(item.children&&item.children.length!==0) {
                   obj.children = this.getTree(item.children);
                }
                arr.push(obj);
            });
        }
            return arr;
        },
        initActBtCategoryQuery(){
            this.loading = true;
            this.postRequest("/activity/ActBtCategory/query/ProcessModelCategoryPageList",this.page).then(resp => {
                this.loading = false;
                if (resp) {
                    this.ActBtCategoryList = resp.data.list;
                }
            });
        },
        updateActBtCategory(data){
            this.initActBtCategoryQuery();
            this.dialogtitle = "编辑模型类别";
            this.dialogVisible = true;
            this.ActBtCategoryTypeInfo = data;
            this.ProcessModelCategoryTreeQuery();
        },
        deleteActBtCategory(data){
            this.$confirm('此操作将永久删除【'+data.categoryName+'】, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest('/activity/ActBtCategory/delete/ProcessModelCategory/'+data.categoryId).then(resp=>{
                        if (resp){
                            this.initActBtCategoryQuery();
                            this.ProcessModelCategoryTreeSelects();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                });
            });
        },
        deleteBatchActBtCategory(){
            this.$confirm('此操作将永久删除【'+this.multipleSelection.length+'】条记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let categoryId = '?';
                    this.multipleSelection.forEach(item=>{
                        categoryId += 'categoryId='+item.categoryId+'&';
                    })
                    this.deleteRequest("/activity/ActBtCategory/delete/BatchProcessModelCategory"+ categoryId).then(resp=>{
                        if (resp){
                            this.initActBtCategoryQuery();
                            this.ProcessModelCategoryTreeSelects();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                });
            });
        },
        handleSelectionChange(val){
            this.multipleSelection = val;
        },
        insertActBtCategoryType(){
            this.dialogtitle = "新增模型类别";
            this.ActBtCategoryTypeInfos();
            this.dialogVisible = true;
            this.ProcessModelCategoryTreeQuery();
        },
        ActBtCategoryTypeInfos(){
            this.ActBtCategoryTypeInfo.categoryName = '';
            this.ActBtCategoryTypeInfo.categorySort = 1;
            this.ActBtCategoryTypeInfo.parentId = "init_level",
            this.ActBtCategoryTypeInfo.categoryStatus = 2,
            this.ActBtCategoryTypeInfo.categoryId = ''
        },
        addActBtCategoryTypeInfo(){
            if (this.ActBtCategoryTypeInfo.categoryId) {
                    this.$refs['ActBtCategoryTypeForm'].validate(valid => {
                        if (valid) {
                            this.putRequest("/activity/ActBtCategory/update/ProcessModelCategory", this.ActBtCategoryTypeInfo).then(resp => {
                                if (resp) {
                                    this.dialogVisible = false;
                                    this.initActBtCategoryQuery();
                                    this.ActBtCategoryTypeInfos();
                                    this.ProcessModelCategoryTreeSelects();
                                }
                            })
                        }
                    });
            } else {
                this.$refs['ActBtCategoryTypeForm'].validate(valid => {
                    if (valid) {
                        this.postRequest("/activity/ActBtCategory/insert/ProcessModelCategory", this.ActBtCategoryTypeInfo).then(resp => {
                            if (resp) {
                                // 关闭弹框
                                this.dialogVisible = false;
                                // 初始化列表
                                this.initActBtCategoryQuery();
                                // 初始化弹框值
                                this.ActBtCategoryTypeInfos();
                                this.ProcessModelCategoryTreeSelects();
                            }
                        })
                    }
                });
            }
        }
    }
}
</script>

<style>
    .insertActBtCategory{
        width: 300px;margin-right: 8px;
    }
    .addActBtCategory{
        margin-bottom: 10px;
    }

    #CategoryTree{
        width: 180px;
        border: 1px solid #E7E7E7;
        height: 730px;
    }

    .filter-tree{
        overflow: auto;
        flex: 1;
        width: 170px;
        height: 600px;
        margin:  10px;
    }

     #CategoryTree #pageList{
        display: flex;
        justify-content: flex-end;
        flex: 1;
    }
    .template{
        display: flex;
    }
</style>
